<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class类选项卡</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        .tab {
            width: 450px;
            height: 300px;
            margin: auto;
            background: skyblue;
            
        }

        .tab_head {
            width: 100%;
            height: 50px;
            font-size: 20px;
            background-color: springgreen;
        }

        .tab_head li {
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
        }

        .tab_con li {
            display: none;
            line-height: 150px;
            text-align: center;
        }

        .tab .tab_head .current {
            color: white;
            background-color: tomato;
        }

        .on {
            display: block !important;
        }
    </style>
</head>

<body>
    <div class="tab" id="tab">
        <!-- 导航 -->
        <ul class="tab_head">
            <li class="current">我的</li>
            <li>企业</li>
            <li>客户</li>
        </ul>
        <!-- 内容区 -->
        <ol class="tab_con">
            <li class="on">我的内容</li>
            <li>企业内容</li>
            <li>客户内容</li>
        </ol>
    </div>
    <script>
        class Tab {
            constructor(id) {
                this.tab = document.querySelector(id)
                this.uls = this.tab.querySelectorAll('ul>li')
                this.ols = this.tab.querySelectorAll('ol>li')
            }
            //方法 --切换tab栏
            onTab() {
                //循环遍历绑定事件
                for (let i = 0; i < this.uls.length; i++) {
                    this.uls[i].addEventListener('click', () => {
                        //清除样式
                        this.clear()
                        //添加新的样式
                        this.uls[i].className = 'current'

                        //自定义属性
                        this.uls[i].setAttribute('data-index', i)
                        //获取索引
                        let index = this.uls[i].getAttribute('data-index')
                        //内容根据索引切换
                        this.ols[index].className = 'on'
                    })
                }
            }
            // 清除样式 方法
            clear() {
                // 循环遍历清除样式
                for (let i = 0; i < this.uls.length; i++) {
                    this.uls[i].className = ''
                    this.ols[i].className = ''
                }
            }
        }

        let t1 = new Tab('#tab')
        console.log(t1)
        t1.onTab()
    </script>
</body>

</html>